<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>By 裴鸿宇</title>
<style type="text/css">
body {
    margin:0px;
}
a{
	text-decoration: none;
}
a:HOVER{
	text-decoration: underline;
}
/*--------*/
.top-area{
	margin-top:20px;
	width:1000px;
	height:40px;
	border:1px solid #D3D3D3;
	background-color:#00FFFF;
}
/*--------*/
.main-area{
	margin-top:10px;
	width:1000px;
	height:100%;
	overflow:hidden;
	border:1px solid #D3D3D3;
}
.first_area{
	overflow:hidden;
	float:left;
	width:300px;
	height:750px;
}
.personal_face{
	float:left;
	margin-left:10px;
	margin-top:10px;
	border:1px solid #99CCCC;
}
.face{
	width:90px;
	height:90px;
}
.personal_information{
	float:left;
	overflow:hidden;
	margin-top:3px;
	margin-left:5px;
	text-align:left;
	width:100px;
	height:110px;
}
.nice{
	overflow:hidden;
	margin-top:10px;
	font-size:13px;
	width:100px;
	height:16px;
}
.hyperlink_info{
	float:left;
	margin-left:5px;
	font-size:14px;
	margin-top:65px;
}
.cue{
	text-align:left;
	width:280px;
	font-size:13px;
}
.task{
	width:300px;
	text-align:left;
	
}
.task_{
	float:left;
	margin-left:25px;
	margin-top:25px;
	width:110px;
	height:110px;
}
.task_img{
	width:110px;
	height:110px;
}
.more{
	margin-top:90px;
	text-align:right;
	width:290px;
	height:30px;
	line-height:30px;
}

.second_area{
	float:left;
	width:393px;
	height:750px;
	border-width:0px 1px;
	border-style:solid;
	border-color:#D3D3D3;
}
.all_dynamic{
	width:393px;
	height:610px;
}
.dynamic{
	width:360px;
	height:auto;
	overflow:hidden;
	font-size:14px;
	text-align:left;
	border:1px solid #D3D3D3;
}
.content{
	overflow:hidden;
	margin-left:25px;
	width:310px;
	height:60px;
	font-size:13px;
}
.time{
	margin-left:25px;
	width:310px;
	height:18px;
	font-size:13px;
}
.discuss{
	margin-left:25px;
	width:310px;
	height:60px;
	font-size:13px;
	display:none;
}
.text{
	width:300px;
	height:40px;
	font-size:13px;
}
.page{
	margin-top:20px;
	width:360px;
	height:30px;
	line-height:30px;
	font-size:14px;
	color:#990000;
}

.third_area{
	float:left;
	width:305px;
	height:750px;
	overflow:hidden;
}
.t_q_g{
	width:306px;
	height:40px;
}
.tiezi{
	cursor:pointer;
	float:left;
	width:100px;
	height:40px;
	line-height:40px;
	font-size:15px;
	font-weight:bold;
	border-width:0px 1px 1px 0px;
	border-style:solid;
	border-color:#D3D3D3;
	background-color:#66FFCC;
}
.question{
	width:101px;
	background-color:#FFFFFF;
	font-weight:normal;
}
.gain{
	width:102px;
	background-color:#FFFFFF;
	font-weight:normal;
}
.question_hyperlink{
	overflow:hidden;
	margin-top:20px;
	width:300px;
	height:600px;
	display:block;
}
.question_list{
	float:left;
	overflow:hidden;
	margin-left:5px;
	margin-top:10px;
	text-align:left;
	width:200px;
	height:30px;
	line-height:30px;
	font-size:14px;
}
.handle{
	margin-top:10px;
	float:left;
	width:80px;
	height:30px;
	line-height:30px;
	margin-left:10px;
	font-size:14px;
}
.more_choice{
	margin-top:50px;
	width:300px;
	height:30px;
}
.choice{
	float:left;
	margin-left:10px;
}
.more_{
	float:right;
	margin-right:10px;
}
.button{
	cursor:pointer;
}
/*-----------------*/
.last-area{
	width:620px;
	height:90px;
	margin-top:20px;
	border:1px solid #D3D3D3;
}
/*----------------*/
.clear_{
	clear:both;
}
</style>
</head>
<body>
	<center>
		<div class="top-area"></div>
		
		<div class="main-area">
			<div class="first_area">
				<div class="personal_face"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face.jpg" class="face"></div>
				<div class="personal_information">
					<div class="nice">昵称</div>
					<div class="nice">个人简介</div>
					<div class="nice">性别、所在城市</div>
					<div class="nice">兴趣爱好</div>
				</div>
				<div class="hyperlink_info"><a href="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/myinfo_edit.jsp">编辑个人资料</a></div>
				<div class="clear_"></div>
				<br/>
				<br/>
				<hr/>
				
				<div class="cue">根据您的情况，我们给您安排了以下任务，来完成它们吧，你将成为万众瞩目的高手！</div>
				<br/>
				<div class="task">
					<div class="task_"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/task/java.png" class="task_img"></div>
					<div class="task_"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/task/air.png" class="task_img"></div>
					<div class="task_"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/task/car.png" class="task_img"></div>
					<div class="task_"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/task/air.png" class="task_img"></div>
					<div class="task_"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/task/java.png" class="task_img"></div>
					<div class="task_"><img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/task/car.png" class="task_img"></div>
					<div class="clear_"></div>
					<div class="more"><a href="#">更多>></a></div>
				</div>
			</div>
			<div class="second_area">
				<br/><font size="5px" color="#DA70D6">好&nbsp;友&nbsp;动&nbsp;态</font><br/>
				<hr/>
				<br/>
				<div class="all_dynamic">
					<div class="dynamic">
						<font size="3px">张三</font>
						<br/>
						<br/>
						<div class="content">
							大皇宫阿黑哥和哦为您龟儿维护黑哥
							大皇宫阿黑哥和哦为您龟儿维护黑哥
							大皇宫阿黑哥和哦为您龟儿维护黑哥
						</div>
						<br/>
						<div class="time">
							<div style="float:left;">2013-9-25</div>
							<div style="float:right;cursor:pointer;" onclick="show(1);" onmouseover="this.style.color='#00CCFF'" onmouseout="this.style.color='#000000'" title="发起评论吧">评论</div>
						</div>
						<div id="discuss_1" class="discuss">
							<textarea class="text">评论内容...</textarea>
							<div style="float:right;"><input type="button" value="发表评论" onclick="dissolve(1);"><input type="button" value="取消" onclick="dissolve1(1);"></div>
						</div>
					</div>
					<br/>
					<div class="dynamic">
						<font size="3px">张三</font>
						<br/>
						<br/>
						<div class="content">
							大皇宫阿黑哥和哦为您龟儿维护黑哥
							大皇宫阿黑哥和哦为您龟儿维护黑哥
							大皇宫阿黑哥和哦为您龟儿维护黑哥
						</div>
						<div class="time">
							<div style="float:left;">2013-9-25</div>
							<div style="float:right;cursor:pointer;"  onclick="show(2);" onmouseover="this.style.color='#00CCFF'" onmouseout="this.style.color='#000000'" title="发起评论吧">评论</div>
						</div>
						<div id="discuss_2" class="discuss">
							<textarea class="text">评论内容...</textarea>
							<div style="float:right;"><input type="button" value="发表评论" onclick="dissolve(2);"><input type="button" value="取消" onclick="dissolve1(2);"></div>
						</div>
					</div>
					<br/>
					<div class="dynamic">
						<font size="3px">张三</font>
						<br/>
						<br/>
						<div class="content">
							大皇宫阿黑哥和哦为您龟儿维护黑哥
							大皇宫阿黑哥和哦为您龟儿维护黑哥
							大皇宫阿黑哥和哦为您龟儿维护黑哥
						</div>
						<div class="time">
							<div style="float:left;">2013-9-25</div>
							<div style="float:right;cursor:pointer;"  onclick="show(3);" onmouseover="this.style.color='#00CCFF'" onmouseout="this.style.color='#000000'" title="发起评论吧">评论</div>
						</div>
						<div id="discuss_3" class="discuss">
							<textarea class="text">评论内容...</textarea>
							<div style="float:right;"><input type="button" value="发表评论" onclick="dissolve(3);"><input type="button" value="取消" onclick="dissolve1(3);"></div>
						</div>
					</div>
					<br/>
					<div class="dynamic">
						<font size="3px">张三</font>
						<br/>
						<br/>
						<div class="content">
							大皇宫阿黑哥和哦为您龟儿维护黑哥
							大皇宫阿黑哥和哦为您龟儿维护黑哥
							大皇宫阿黑哥和哦为您龟儿维护黑哥
						</div>
						<div class="time">
							<div style="float:left;">2013-9-25</div>
							<div style="float:right;cursor:pointer;" onclick="show(4);" onmouseover="this.style.color='#00CCFF'" onmouseout="this.style.color='#000000'" title="发起评论吧">评论</div>
						</div>
						<div id="discuss_4" class="discuss">
							<textarea class="text">评论内容...</textarea>
							<div style="float:right;"><input type="button" value="发表评论" onclick="dissolve(4);"><input type="button" value="取消" onclick="dissolve1(4);"></div>
						</div>
					</div>
				</div>
				<div class="page">上一页&nbsp;1&nbsp;2&nbsp;3&nbsp;下一页</div>
			</div>
			
			<div class="third_area">
				<div class="t_q_g">
					<div id="tiezi" class="tiezi" onclick="change(1);">我的帖子</div>
					<div id="question" class="tiezi question" onclick="change(2);">我的问题</div>
					<div id="gain" class="tiezi question gain" onclick="change(3);">我的成果</div>
					<div class="clear_"></div>
					<div id="tiezi_hyperlink" class="question_hyperlink">
						<div class="question_list"><a href="#">java学习的注意事项！</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">java你真的懂么？</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">java学习的注意事项！</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">java你真的懂么？</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">java学习的注意事项！</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>				
					</div>
					<div id="more_choice1" class="more_choice">
						<div class="choice"><input type="button" value="我要发帖" class="button"></div>
						<div class="more_"><a href="#">更多>></a></div>
					</div>
					
					<div id="question_hyperlink" class="question_hyperlink" style="display:none;">
						<div class="question_list"><a href="#">iPhone 5S指纹识别系统是怎样被破解的？</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">京沪高铁出现“吸血臭虫”，臭虫会传染疾病吗？</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">韩寒的手机为什么会被锁屏43.74年？</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">喝酒时不能吃什么菜？</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">帅的英文单词是什么？</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
					</div>
					<div id="more_choice2" class="more_choice">
						<div class="choice"><input type="button" value="我要提问" class="button"></div>
						<div class="more_"><a href="#">更多>></a></div>
					</div>
					
					<div id="gain_hyperlink" class="question_hyperlink" style="display:none;">
						<div class="question_list"><a href="#">java达人</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">java达人</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">飞机达人</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">飞机达人</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">飞机达人</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
						<div class="question_list"><a href="#">飞机达人</a></div>
						<div class="handle"><a href="#"><u>编辑</u></a>&nbsp;&nbsp;<a href="#"><u>删除</u></a></div>
						<div class="clear_"></div>
					</div>
					<div id="more_choice3" class="more_choice">
						<div class="choice"><input type="button" value="成果注册" class="button"></div>
						<div class="more_"><a href="#">更多>></a></div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="last-area"></div>
	</center>
</body>
</html>
<script type="text/javascript">
function show(n){
	document.getElementById("discuss_"+n).style.display="block";	
}
function dissolve(n){
	document.getElementById("discuss_"+n).style.display="none";
	alert("发表成功！");
}
function dissolve1(n){
	document.getElementById("discuss_"+n).style.display="none";
}
function change(n){
	if (n==1){
		document.getElementById("tiezi").style.backgroundColor="#66FFCC";
		document.getElementById("tiezi").style.fontWeight="bold";
		document.getElementById("question").style.backgroundColor="#FFFFFF";
		document.getElementById("question").style.fontWeight="normal";
		document.getElementById("gain").style.backgroundColor="#FFFFFF";
		document.getElementById("gain").style.fontWeight="normal";
		
		document.getElementById("tiezi_hyperlink").style.display="block";
		document.getElementById("question_hyperlink").style.display="none";
		document.getElementById("gain_hyperlink").style.display="none";
		
		document.getElementById("more_choice1").style.display="block";
		document.getElementById("more_choice2").style.display="none";
		document.getElementById("more_choice3").style.display="none";
	}
	if (n==2){
		document.getElementById("tiezi").style.backgroundColor="#FFFFFF";
		document.getElementById("tiezi").style.fontWeight="normal";
		document.getElementById("question").style.backgroundColor="#66FFCC";
		document.getElementById("question").style.fontWeight="bold";
		document.getElementById("gain").style.backgroundColor="#FFFFFF";
		document.getElementById("gain").style.fontWeight="normal";
		
		document.getElementById("tiezi_hyperlink").style.display="none";
		document.getElementById("question_hyperlink").style.display="block";
		document.getElementById("gain_hyperlink").style.display="none";
		
		document.getElementById("more_choice1").style.display="none";
		document.getElementById("more_choice2").style.display="block";
		document.getElementById("more_choice3").style.display="none";
	}
	if (n==3){
		document.getElementById("tiezi").style.backgroundColor="#FFFFFF";
		document.getElementById("tiezi").style.fontWeight="normal";
		document.getElementById("question").style.backgroundColor="#FFFFFF";
		document.getElementById("question").style.fontWeight="normal";
		document.getElementById("gain").style.backgroundColor="#66FFCC";
		document.getElementById("gain").style.fontWeight="bold";
		
		document.getElementById("tiezi_hyperlink").style.display="none";
		document.getElementById("question_hyperlink").style.display="none";
		document.getElementById("gain_hyperlink").style.display="block";
		
		document.getElementById("more_choice1").style.display="none";
		document.getElementById("more_choice2").style.display="none";
		document.getElementById("more_choice3").style.display="block";
	}
	
}
</script>